<template>
  <view>
    <!-- 搜索+轮播图 -->
    <view class="bgc">
      <view id="search" :style="scroll">
        <u-search placeholder="输入你想要的玩具" :showAction="false" v-model="keyword" margin="50px 100px 10px 10px"
          @search="search"></u-search>
      </view>
      <view class="u-demo-block lbt">
        <text class="u-demo-block__title"></text>
        <u-swiper :list="swiper" previousMargin="30" nextMargin="30" circular :autoplay="true" radius="5"
          bgColor="rgba(255,255,255,0.1)" height="350rpx" indicator></u-swiper>
      </view>
    </view>
    <!-- 分类区 -->
    <view class="grid">
      <u-grid :border="false">
        <u-grid-item v-for="(item,index) in baseList" :key="index" @click="searchClass(item)">
          <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="30" :color="item.color"
            @click="searchClass(item)"></u-icon>
          <u-tag :text="item.title" shape="circle" @click="searchClass(item)"></u-tag>
        </u-grid-item>
      </u-grid>
      <u-toast ref="uToast" />
    </view>
    <!-- 内容区 -->
    <view class="article" v-if="arr.length>0">
      <view class="article-item" v-for="(item,index) in arr" :key="index" @click="toArticle(item)">
        <image :src="item.img[0]" mode="aspectFill"></image>
        <h1>{{item.title}}</h1>
        <p>{{item.address}}</p>
        <view>
          <image :src="item.userAva" class="avatar"></image>
          <span>{{item.userName}}</span>
        </view>
      </view>
    </view>
    <view class="noArticle" v-else>
      没有找到你想要的玩具
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        limit: 5,
        skip: 0,
        loginCheck: false,
        uploadEnble: true,
        keyword: '',
        scroll: "background:transparent;",
        swiper: [
          'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8764a2d0-4a21-41de-b6cd-10591b362897/e4fd9299-5f7e-4815-8f02-135d3dc272fc.jpeg',
          'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8764a2d0-4a21-41de-b6cd-10591b362897/622f5be0-ef67-4164-9b29-2a11f0c6f44a.jpeg',
          'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8764a2d0-4a21-41de-b6cd-10591b362897/05f06253-2d39-4249-8c1b-2d49c7234536.jpeg',
          'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8764a2d0-4a21-41de-b6cd-10591b362897/c9b6705f-9d66-473d-8ff1-e42715a97d32.jpeg'
        ],
        baseList: [{
            name: 'man',
            title: '男孩玩具',
            color: '#09f'
          },
          {
            name: 'woman',
            title: '女孩玩具',
            color: 'pink'
          },
          {
            name: 'star-fill',
            title: '通用玩具',
            color: '#fae712'
          }
        ],
        arr: []
      }
    },
    // 控制滚动时顶部渐变
    onPageScroll(obj) {
      this.handleScroll(obj)
    },
    // 分享给朋友
    onShareAppMessage() {
      return {
        title: '快来找找看有没有你想要的玩具吧'
      }
    },
    // 分享到朋友圈
    onShareTimeline() {
      return {
        title: '快来找找看有没有你想要的玩具吧'
      }
    },
    // 当组件加载时，判断是否需要去后台获取数据
    async onLoad() {
      // if (this.arr.length < 5) {
      this.getArticle()
      this.skip++
      uni.$u.randomArray(this.arr)
      // }
      uni.getStorage({
        key: 'myopenid',
        success: (res) => {
          // console.log('成功了');
          this.$store.commit('setopenid', res.data)
        },
        fail: (res) => {
          // console.log("还未登陆");
        }
      })
      uni.getStorage({
        key: "userInfo",
        success: (res) => {
          this.$store.commit('setNickName', res.data.nickName)
          this.$store.commit('setAvatarUrl', res.data.avatarUrl)
          this.loginCheck = true
        },
        fail: (res) => {
          // console.log("还未登陆");
        }
      })
    },
    // 判断是否需要开启底部自动加载数据
    onReachBottom() {
      if (this.uploadEnble) {
        this.getArticle()
        this.skip++
      }
    },
    // 下拉刷新
    onPullDownRefresh() {
      this.arr = []
      this.skip = 0
      this.getArticle()
      this.skip++
      this.uploadEnble = true
      uni.stopPullDownRefresh()
    },
    methods: {
      // 进入内容页
      toArticle(item) {
        uni.navigateTo({
          url: "/pages/article/article?article=" + JSON.stringify(item)
        })

      },
      // 搜索的数据
      search(keyword) {
        this.uploadEnble = false
        let search = keyword
        this.keyword = ''
        uniCloud.callFunction({
          name: "articleSearch",
          data: {
            title: search
          },
          success: (res) => {
            if (res.result.length > 0) {
              this.arr = res.result
            } else {
              this.arr = []
            }
          }
        })
      },
      // 获取全部数据
      getArticle() {
        uniCloud.callFunction({
          name: 'article',
          data: {
            limit: this.limit,
            skip: this.skip * this.limit
          },
          success: (res) => {
            if (res.result.length == 0) {
              this.uploadEnble = false
            } else {
              let randomArr = uni.$u.randomArray(res.result)
              for (let i = 0; i < res.result.length; i++) {
                this.arr.push(randomArr[i])
              }
            }
          }
        })
      },
      // 点击分类时筛选的数据
      searchClass(item) {
        if (item.title == "通用玩具") {
          this.skip = 0
          this.arr = []
          this.getArticle()
          this.skip++
          this.uploadEnble = true
        } else {
          this.uploadEnble = false
          uniCloud.callFunction({
            name: 'articleSearch',
            data: {
              class: item.title
            },
            success: (res) => {
              this.arr = res.result
            }
          })
        }
        this.$refs.uToast.success(`${item.title}来啦`)
      },
      // 控制顶部栏渐变
      handleScroll(obj) {
        let scrollTop = obj.scrollTop
        if (scrollTop > 0 && scrollTop <= 300) {
          this.scroll = `background: rgba(0, 153, 255,${scrollTop / (scrollTop + 40)});`;
        } else if (scrollTop == 0 || scrollTop < 0) {
          this.scroll = "background: transparent ;";
        } else if (scrollTop > 300) {
          this.scroll = "background: rgba(0, 153, 255,1);";
        }
      },
    },
  }
</script>

<style lang="scss">
  .status {
    height: 30px;
  }

  .bgc {
    overflow: hidden;
    width: 750rpx;
    height: 600rpx;
    background: url(/static/img/topbg.jpeg) no-repeat;

    #search {
      position: fixed;
      top: 0;
      width: 750rpx;
      z-index: 2;
    }

    .lbt {
      margin-top: 100px;
    }

    .search {
      width: 500rpx;
      height: 30px;
      margin-top: 30px;
      margin-left: 30px;
    }
  }

  .grid {
    margin: 10px;
    padding-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 1px 5px #ccc;
    background-color: #fff;
  }

  .article {
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    margin: 10px;
    box-sizing: border-box;
  }

  .noArticle {
    width: 750rpx;
    height: 200px;
    text-align: center;
    line-height: 200px;
  }

  .article-item {
    // flex-grow: 1;
    box-sizing: border-box;
    padding: 5px;
    // border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 1px 5px #ccc;
    width: 47%;
    margin: 5px 5px;
    background-color: #fff;

    h1 {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 16px;
      font-weight: 550;
    }

    .avatar {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      vertical-align: middle;
    }

    p {
      height: 32px;
      margin: 10px 5px 5px 0;
      font-size: 12px;
      color: #aaa;
    }

    span {
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-left: 5px;
      font-size: 12px;
      vertical-align: middle;
      overflow: hidden;
    }

    image {
      border-radius: 10px;
      width: 100%;
      height: 150px;
    }
  }
</style>
